<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="VUEJS/vue.js"></script>
		<style>
			/*这个指令页面选择器，有这个属性就执行这个样式*/
			
			[v-cloak]{
				display: none;//隐藏
			}
		</style>
	</head>
	<body>
		<h3>姓名（单值），年龄（单值），爱好（数组），女朋友（对象），豪车（对象数组）</h3>
		<div id="app"v-cloak>
		{{name}},{{age}}
		<hr />
		{{hobby}}
		<hr />
		{{hobby[0]}},{{hobby[hobby.length-1]}}
		<hr />
		{{girl.name}},{{girl.age}}
		<hr />
		{{girl}}
		<hr />
		{{cars[0].name}},{{cars[0].color}}
		{{cars[cars.length-1].name}},{{cars[cars.length-1].color}}
		<hr />
		{{cars}}
		</div>
		
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				name:"丁丁",//字符串类型两边用双引号或者单引号
				age:18,//整数浮点数直接写
				hobby:["爬山","游泳","唱歌"],//字符串数组
				girl:{//对象有两个属性，对象可以套对象data套着girl
					name:"艳艳",
					age:"14"
				},
				cars:[{//先拿数组元素，在调用属性
					name:"劳斯莱斯",color:"blue"},
					{name:"奔驰",color:"red"},
					{name:"宝马",color:"white",
					}]
			}
		});
		
	</script>
</html>
